<template>
  <div class="content">
    <p>基础用法</p>
    <div class="group anvil">
      <anvil-rate v-model="value1"></anvil-rate>
      <anvil-rate v-model="value2" :colors="colors" @change="handleChange2">
      </anvil-rate>
    </div>

    <div class="group el">
      <el-rate v-model="value1"></el-rate>
      <el-rate v-model="value2" :colors="colors" @change="handleChange1">
      </el-rate>
    </div>

    <p>辅助文字</p>
    <div class="group anvil">
      <anvil-rate v-model="value1" show-text> </anvil-rate>
    </div>

    <div class="group el">
      <el-rate v-model="value1" show-text> </el-rate>
    </div>

    <p>其它 icon</p>
    <div class="group anvil">
      <anvil-rate
        v-model="value"
        :icon-classes="iconClasses"
        void-icon-class="el-icon-picture-outline-round"
        :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
      >
      </anvil-rate>
    </div>

    <div class="group el">
      <el-rate
        v-model="value"
        :icon-classes="iconClasses"
        void-icon-class="el-icon-picture-outline-round"
        :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
      >
      </el-rate>
    </div>

    <p>只读</p>
    <div class="group anvil">
      <anvil-rate
        v-model="value5"
        disabled
        show-score
        text-color="#ff9900"
        score-template="{value}"
      >
      </anvil-rate>
    </div>

    <div class="group el">
      <el-rate
        v-model="value5"
        disabled
        show-score
        text-color="#ff9900"
        score-template="{value}"
      >
      </el-rate>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: null,
      value2: null,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"], // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
      value: null,
      iconClasses: [
        "el-icon-message-solid",
        "el-icon-s-platform",
        "el-icon-s-ticket",
      ],
      value5: 3.7,
    };
  },
  methods: {
    handleChange1(data) {
      console.log("🚀 ~ file: rate.vue:89 ~ handleChange1 ~ data:", data);
    },
    handleChange2(data) {
      console.log("🚀 ~ file: rate.vue:93 ~ handleChange2 ~ data:", data);
    },
  },
};
</script>

<style lang="scss" scoped>
.group {
  /* border: 1px solid red; */
  padding: 6px;

  &.anvil {
    border-color: skyblue;
  }

  &.el {
    border-color: gray;
    display: block;
  }
}
</style>
